<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:s="http://jboss.com/products/seam/taglib"
        >

<ui:component>

<style type="text/css">
    .barsearch {
        height: 14px;
        width: 100px;
        padding: 2px 3px;
        font-size: 11px;
        font-weight: bold;
    }

    .barsearchbutton {
        border-width: 1px;

    }

    /*.logoHome {*/
    /*height: 34px;*/
    /*width: 200px;*/
    /*float: left;*/
    /*background-color: green;*/

    /*}*/

    .commandHome {
    /*height: 34px;*/
        width: 100%; /*float: right;*/

    }

    .a1 A:link {
        text-decoration: none;
        color: white;
    }

    .a1 A:visited {
        text-decoration: none
    }

    .a1 A:active {
        text-decoration: none;
        color: yellow;
    }

    .a1 A:hover {
        text-decoration: underline;
        font-style: italic;
        color: #ff9999;
    }

    .myClass {
        padding: 1px 3px;

    }

    .fullHeight {
    /*padding: 1px 1px;*/
        height: 30px;

    }


</style>


<!--<h:panelGroup styleClass="logoHome" layout="block">-->
<!--<h:outputLabel styleClass="logoHomeStyle" value="BeConnected"/>-->
<!--</h:panelGroup>-->

<h:form>
<h:panelGroup id="homeToolBarCommand" styleClass="commandHome , a1" layout="block">

<rich:toolBar itemSeparator="none">
<rich:toolBarGroup styleClass="myClass">
    <h:graphicImage onclick="executeHome();" value="./style/images/homeLogo.png"
                    style="cursor:pointer; background:transparent;"/>
    <!--<h:outputLabel onclick="executeHome();" style="cursor:pointer; font-size:20px; margin:5px; color:white" value="BeConnected   "/>-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:outputLabel value="#{resources.homeLabel}" style="cursor:pointer" onclick="executeHome();">
                    <a4j:jsFunction name="executeHome" action="#{navigationBean.jump}">
                        <f:setPropertyActionListener value="home" target="#{navigationBean.pageClickForView}"/>
                    </a4j:jsFunction>
                </h:outputLabel>
            </h:panelGroup>

        </f:facet>

    </rich:dropDownMenu>
    <!--<a4j:commandLink value="Home" action="#{home.home}"/>-->
    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px; cursor:crosshair">
                <h:outputLabel value="#{resources.profileLabel}" style="cursor:pointer" onclick="operationProfile();">
                    <a4j:jsFunction name="operationProfile" action="#{navigationBean.jump}">
                        <f:setPropertyActionListener value="profile" target="#{navigationBean.pageClickForView}">
                            <!--//TODO parametri za skok na profile-->
                        </f:setPropertyActionListener>
                    </a4j:jsFunction>
                </h:outputLabel>

            </h:panelGroup>

        </f:facet>
        <rich:menuItem value="#{resources.informationLabel}" action="#{navigationBean.jump}">
            <f:setPropertyActionListener value="profile" target="#{navigationBean.pageClickForView}">
                <!--//TODO parametri za skok na profile-->
            </f:setPropertyActionListener>
        </rich:menuItem>
        <rich:menuItem value="#{resources.photosLabel}" action="#{navigationBean.profile}">
            <f:setPropertyActionListener value="profile" target="#{navigationBean.pageClickForView}">
                <!--//TODO parametri za skok na profile-->
            </f:setPropertyActionListener>
        </rich:menuItem>
    </rich:dropDownMenu>
    <!--<a4j:commandLink value="Profile" action="#{home.profile}"/>-->

    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:outputLabel value="#{resources.friendsLabel}" style="cursor:pointer" onclick="operationFriends();">
                    <a4j:jsFunction name="operationFriends" action="#{navigationBean.jump}">
                        <f:setPropertyActionListener value="friends" target="#{navigationBean.pageClickForView}">
                            <!--//TODO parametri za skok na friends-->
                        </f:setPropertyActionListener>
                    </a4j:jsFunction>
                </h:outputLabel>
            </h:panelGroup>

        </f:facet>
        <rich:menuItem value="#{resources.recentlyAddedLabel}" action="#{navigationBean.jump}">
            <f:setPropertyActionListener value="friends" target="#{navigationBean.pageClickForView}">
                <!--//TODO parametri za skok na friends-->
            </f:setPropertyActionListener>
        </rich:menuItem>

        <rich:menuItem value="#{resources.allFriendsLabel}" action="#{navigationBean.jump}">
            <f:setPropertyActionListener value="friends" target="#{navigationBean.pageClickForView}">
                <!--//TODO parametri za skok na friends-->
            </f:setPropertyActionListener>
        </rich:menuItem>
    </rich:dropDownMenu>
    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationMailbox();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <!--<a4j:jsFunction name="operationMailbox" action="#{home.inbox}"/>-->
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.mailboxLabel} (#{mailSessionBean.unreadCount})"/>
        </h:panelGroup>
    </a4j:outputPanel>
    <!--<a4j:commandLink value="Inbox" "/>-->
    <!--</rich:toolBarGroup>-->

    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationContacts();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <!--<a4j:jsFunction name="operationContacts" action="#{home.contacts}"/>-->
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.contactsLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>

      <rich:dropDownMenu styleClass="fullHeight">
            <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                             style="vertical-align:middle">
                    <h:outputText value="More"/>
                </h:panelGrid>
            </h:panelGroup>

        </f:facet>

        <rich:menuItem value="Music" submitMode="none"
                           onclick="window.location.href = '/../music/music.jsf';"/>
          <rich:menuItem value="Chat" submitMode="none"/>

      </rich:dropDownMenu>
    <!--<a4j:outputPanel-->
            <!--styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"-->
            <!--layout="block"-->
            <!--onclick="operationChat();"-->
            <!--onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"-->
            <!--onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"-->
            <!-->-->
        <!--<a4j:jsFunction name="operationChat" action="#{home.chat}"/>-->
        <!--<h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">-->
            <!--<h:outputText value="#{resources.chatLabel}"/>-->
        <!--</h:panelGroup>-->
    <!--</a4j:outputPanel>-->

    <!--<a4j:outputPanel rendered="#{home.manager}"-->
    <!--styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"-->
    <!--layout="block"-->
    <!--onclick="operationManage();"-->
    <!--onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"-->
    <!--onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"-->
    <!-->-->
    <!--<a4j:jsFunction name="operationManage" action="#{home.manage}"/>-->
    <!--<h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">-->
    <!--<h:outputText value="#{resources.manageLabel}"/>-->
    <!--</h:panelGroup>-->
    <!--</a4j:outputPanel>-->
</rich:toolBarGroup>

<rich:toolBarGroup location="right" styleClass="myClass">

    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationAccount();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationAccount"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{accountBean.fullName}"/>
        </h:panelGroup>
    </a4j:outputPanel>


    <rich:dropDownMenu styleClass="fullHeight">

        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                             style="vertical-align:middle">
                    <h:outputText value="#{resources.settingsMeni}"/>
                </h:panelGrid>
            </h:panelGroup>

        </f:facet>

            <rich:menuItem value="#{resources.accountLabel}" submitMode="none"
                           onclick="window.location.href = '/../home/account.jsf?guid=#{sessionBean.sessionGuid}';"
                         >
                <!--<f:setPropertyActionListener value="account" target="#{navigationBean.pageClickForView}">-->
                    <!--//TODO parametri za skok na profile-->
                <!--</f:setPropertyActionListener>-->
            </rich:menuItem>

        <rich:menuGroup value="#{resources.languageMenuItem}">
            <rich:menuItem value="#{resources.englishMenuItem}">
                <a4j:actionparam name="language" value="en" assignTo="#{languageBean.language}"/>
            </rich:menuItem>
            <rich:menuItem value="#{resources.serbianMenuItem}">
                <a4j:actionparam name="language" value="sr" assignTo="#{languageBean.language}"/>
            </rich:menuItem>
        </rich:menuGroup>
        <rich:menuGroup value="#{resources.themeMenuGroup}">
            <rich:menuItem value="BlueSky">
                <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="BlueSky Modified">
                <a4j:actionparam name="skin" value="blueSky Modified" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Laguna">
                <a4j:actionparam name="skin" value="laguna" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Class-X">
                <a4j:actionparam name="skin" value="class-X" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Dark-X">
                <a4j:actionparam name="skin" value="dark-X" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Classic">
                <a4j:actionparam name="skin" value="classic" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="JapanCherry">
                <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Ruby">
                <a4j:actionparam name="skin" value="ruby" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Wine">
                <a4j:actionparam name="skin" value="wine" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="DeepMarine">
                <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="EmereldTown">
                <a4j:actionparam name="skin" value="emeraldTown" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Sakura">
                <a4j:actionparam name="skin" value="sakura" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Default">
                <a4j:actionparam name="skin" value="default" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
        </rich:menuGroup>


    </rich:dropDownMenu>
    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationLogout();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationLogout" action="#{loginBean.logout}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.logoutLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>

    <!--<a4j:commandLink value="Logout" action="#{home.logout}"/>-->
    <!--<h:inputText styleClass="barsearch" value="#{searchSessionBean.simpleSearchKey}"/>-->
    <h:inputText styleClass="barsearch" value="#{navigationBean.mainSearchKey}"/>
    <h:commandButton styleClass="barsearchbutton"
                     action="#{navigationBean.jump}"
                     value="#{resources.findLabel}"
            />

</rich:toolBarGroup>
</rich:toolBar>


</h:panelGroup>

</h:form>


</ui:component>


</html>
